<template>
  <div>
    <div class="content">
      <div class="tab">
        <div
          class="tab-item"
          v-for="(item, index) in tabItems"
          :key="index"
          :class="{ active: activeIndex === index }"
        >
          <div class="image">
            <div class="title" @click="handleTabClick(index)">
              {{ item.title }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeIndex: 1, // 设置默认活跃项
      tabItems: [
        { title: "首页", route: "/index" },
        { title: "选题策划", route: "/clues" },
        { title: "传播质效", route: "/assess" },
      ],
    };
  },
  props: {},
  mounted() {
    this.getData();
  },
  methods: {
    getData() {},
    handleTabClick(index) {
      this.activeIndex = index; // 设置为当前激活项的索引

      // 根据索引执行跳转
      const route = this.tabItems[index].route;
      if (route) {
        // 使用Vue Router进行跳转
        this.$router.push(route);

        // 如果没有使用Vue Router，可以使用原生跳转
        // window.location.href = route;
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.content {
  height: 81px;
  width: 985px;
  background-image: url("../../assets/img/center/bootom-image.png");
  margin-left: -130px;
  .tab {
    display: flex;
    text-align: center;
    align-items: center;
    justify-content: space-evenly;
    padding: 20px 130px;

    .tab-item {
      display: flex; // 使用flex布局
      flex-direction: column; // 纵向排列
      align-items: center; // 横向居中
      justify-content: center; // 纵向居中

      .image {
        position: absolute;
        bottom: 0px;
        height: 75px;
        width: 113px;
        background-size: cover;
      }

      .title {
        cursor: pointer;
        margin-top: 25px;
        height: 15px;
        font-weight: 400;
        font-size: 20px;
        color: #98b3e1;
        opacity: 0.7;
        text-align: center; // 文字居中
      }
    }

    // 激活项样式
    & .tab-item.active {
      .image {
        background-image: url("../../assets/img/center/bottom-icon.png"); // 激活状态的图标
      }

      .title {
        opacity: 1; // 选中状态不透明
        height: 15px;
        font-weight: 400;
        font-size: 20px;
        color: #edf3ff;
      }
    }
  }
}
</style>
